<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="uname"><br>
    <input type="text" name="" id="upwd"><br>
    <button>ajax</button>
    <div id="d1"></div>
    <script>
        var btn = document.querySelector('button');
        var d1 = document.querySelector('#d1');
        btn.onclick = function() {
            // 获取用户输入的数据
            var _uname = uname.value;
            var _upwd = upwd.value;
            //判断非空
            if (!_uname) {
                alert("请输入用户名");
            } else if (!_upwd)(
                alert("请输入密码")
            );
            // 创建异步对象xhr
            var xhr = new XMLHttpRequest();
            // 创建监听,接收响应
            xhr.onreadystatechange = function() {
                // 如果接收到,且状态码为200,接收数据
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var r = xhr.response;
                    if (r == 1) {
                        d1.innerHTML = "成功";
                    } else {
                        d1.innerHTML = "失败";
                    }
                }
            }
            xhr.open("get", `/ajax/http_get?uname=${_uname}&upwd=${_upwd}`, true);
            xhr.send();
        }
    </script>
</body>

</html>